/*
 * @Author: your name
 * @Date: 2021-10-05 11:05:48
 * @LastEditTime: 2021-11-22 16:11:00
 * @LastEditors: Shentong
 * @Description: 我的红包s
 */
import React, { useEffect, useState  } from 'react';
import Taro, { usePullDownRefresh, useRouter, useDidShow } from '@tarojs/taro';
import { View } from "@tarojs/components";
import { connect } from 'react-redux'

import { showToast } from '@/utils/index';
import { getRedpacketList } from '@/api/redPacket'
import NoDataIcon from '@/src/assets/icon/noDataIcon.png'

import styles from './index.module.scss'

const RedPacket = ({ dispatch }) => {
    const [redPacketList, setRedPacketList] = useState<Array<any>>([])

    const routerParams = useRouter().params;

    const dataList = () => {
      Taro.showLoading({ title: "加载中...", mask: true });
      getRedpacketList().then((res) => {
          const { data } = res
          setRedPacketList(data)
          Taro.hideLoading();
      }).finally(() => {
        Taro.stopPullDownRefresh();
      })
    }

    const redpacketClik = (item) => {
        if (routerParams.fromPage === 'submitOrder') {
            if (!item.isUse) return showToast('红包已过期')
            
            dispatch({ type: 'ADD_REDPACK_ID', payload: {
                redPackId: item.userRedPacketSId || ''
            }})
            Taro.navigateBack()
        }
    }

    useDidShow(() => {
        dataList()
    });

    usePullDownRefresh(() => {
        dataList()
    })
    return (
        <View className={styles.redEnvelopes}>
            <View>
                {redPacketList.map((item, index) => {
                    return (
                        <View className={styles.list} key={index}  onClick={() => redpacketClik(item)}>
                            <View className={styles.top}>
                                <View className={styles.topLeft}>
                                    <View className={`${styles.name} ${!item.isUse ?  styles.grayBg : ''}`}>{item.redPacketType}</View>
                                    <View className={styles.times}>
                                        有效期至
                                        {item.validTime}</View>
                                </View>
                                <View className={styles.topRight}>
                                    <View className={`${styles.price} ${!item.isUse ?  styles.grayBg : ''}`}>
                                        <View className={styles.label}>¥</View>
                                        <View className={styles.num}>{item.minusAmount}</View>
                                    </View>
                                    <View className={styles.desc}>满{item.fullAmount}可用</View>
                                </View>
                            </View>
                            <View className={styles.bottom}>
                                可与其他活动优惠同时享受。在线支付享受
                            </View>
                        </View>
                    )
                })}
            </View>
            {
                !redPacketList.length && (
                    <van-empty description='暂无数据' image={NoDataIcon} />
                )
            }
        </View>
    )
}

export default connect(null, dispatch => ({
    dispatch
}))(RedPacket)